<template>
  <div class="my">
    <div class="myinfo">
      <img @click="toLogin" :src="avator" alt="">
      <div>
        <p class="name">用户名</p>
        <p class="intr">个人简介</p>
      </div>
    </div>
    <ul >
          <li
          class="item border-bottom"
          v-for="item of List"
          :key="item.id"
        >   <div class =item-img-wrapper>
              <img class="item-img" :src="item.imgUrl" />
            </div>
            <div class="item-info">
              <p class="item-title">{{item.title}}</p>
              <p class="item-desc">{{">"}}</p>
            </div>
        </li>
      </ul>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        avator: "http://yanxuan.nosdn.127.net/8945ae63d940cc42406c3f67019c5cb6.png",
        List: [{
            title: "我的发布",
            imgUrl: "https://pics.lvjs.com.cn/mobile/webapp/release/my/main/img/cyxx.png",
          },
          {
            title: "我的足迹",
            imgUrl: "https://m.tuniucdn.com/fb2/t1/G3/M00/00/FC/Cii_NllA_eGIXE9nAAAMbNyfqH8AAAKPQP_83wAAAyE554.png",
          },
          {
            title: "我的收藏",
            imgUrl: "https://pics.lvjs.com.cn/mobile/webapp/release/my/main/img/wdsc.png",
          },
          {
            title: "地址管理",
            imgUrl: "https://pics.lvjs.com.cn/mobile/webapp/release/my/main/img/wdfp.png",
          },
          {
            title: "联系客服",
            imgUrl: "https://pics.lvjs.com.cn/mobile/webapp/release/my/main/img/kfzx.png",
          },
          {
            title: "帮助中心",
            imgUrl: "https://pics.lvjs.com.cn/mobile/webapp/release/my/main/img/aboutLvmm.png",
          },
          {
            title: "意见反馈",
            imgUrl: "https://pics.lvjs.com.cn/mobile/webapp/release/my/main/img/wenjuan.png",
          }
        ]
      };
    },

  };
</script>
<style lang='scss' scoped>
  .my {
  .myinfo {
    width: 100%;
    height: 250rpx;
    display: flex;
    align-items: center;
    background:#f3de99;
    padding: 0 30rpx;
    box-sizing: border-box;
    img {
      height: 148rpx;
      width: 148rpx;
      border-radius: 50%
    }
    div {
      margin-left: 30rpx;
      p {
        color: #fff;
        font-size: 30rpx;
        margin-bottom: 10rpx
      }
      p:nth-child(2) {
        font-size: 28rpx;
      }
    }
  }
  .item{
    display:flex;
    padding-top:5px;
    padding-bottom:5px;
    
    }
    .item-info{
      display:flex;
      border-bottom:1px solid #f3de99
    }
    .item-title{
      font-size:18px;
      height:20px;
      line-height:20px;
      padding-top:15px;
      padding-left:15px;
      white-space: nowrap;
      padding-bottom:10px;
    }
    .item-desc{
      float:right;
      padding-top:15px;
      margin-left:200px;
      padding-bottom:10px;
    }

    .item-img{
      padding-left:20px;
      padding-top:15px;
      width:22px;
      height:22px;
    }  
}

</style>